<template>
	<view class="page">
		<view class="bg">
			
			
			<image style="width: 100%;height: 100%;" mode="aspectFill" :src="userInfo.avatar"/>
		<view class="bgs"></view>
		</view>
		
		<view style="padding-top: 60rpx;position: relative;z-index: 1;">
			<image class="avatar" mode="aspectFill" :src="userInfo.avatar" />
			<view class="name">{{userInfo.nickName}}</view>
			<view class="age">教龄:{{userInfo.teaching}}</view>
		</view>

		<view class="box">
			<view class="title">老师简介</view>
			<view class="item">主攻方向 | {{userInfo.attack}}</view>
			<view class="item">教育背景 | {{userInfo.background}}</view>
			<view class="item">荣誉资质 | {{userInfo.honor}}</view>
		</view>
		<view class="photo">
			<view class="photo__title">作品</view>
			
		</view>
	</view> 
</template>

<script>
	import {userById} from '@/utils/api.js'
	export default {
		data() {
			return {
				userId:'',
				userInfo:{}
			};
		},
		onLoad({id}){
			this.userId=id
			this.info()
		},
		methods:{
			info(){
				this.userById()
			},
			async userById(){
			  this.userInfo= (await	userById({id:this.userId})).data
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	.bgs{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
	}
	.bg{
		width: 100%;
		height: 500rpx;
		filter: blur(5px);
		position: absolute;
		top: 0;
		z-index: 0;
	}
	.avatar{
		margin: auto;
		border-radius: 50%;
		border:1px solid #fff;
		width: 200rpx;
		height: 200rpx;
		display: block;
	}
	.name{
		color:#fff;
		font-weight: 600;
		text-align: center;
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	.age{
		margin-top: 20rpx;
		color:#fff;
		text-align: center;
		font-size: 30rpx;
	}
	.box{
		width: 650rpx;
		margin: auto;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 49rpx;
		position: relative;
		z-index: 1;
		padding: 20rpx;
		box-sizing: border-box;
		.title{
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}
		.item{
			color:#737373;
		}
	}
	.photo{
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		min-height: 400rpx;
		&__title{
			font-size: 40rpx;
		}
	}
}
</style>
